<template>
    <div id="bet-button">
        <div class="div2">
            <div class="input-group">
                <span class="input-group-addon" @click="removeRate">-</span>
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" v-model="thing[4].rate">
                <span class="input-group-addon" @click="addRate">+</span>
            </div>
            <div class="middle">
                <p>共<span style="color: red">{{thing[3].price * thing[4].rate}}</span>元</p>
            </div>
            <div class="right">
                <button type="button" class="btn btn-danger btn-lg">
                    立即投注
                </button>
                <span>倍</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bet-button",
        props: {
            thing:{
                type: Array,
                required: true
            }
        },
        methods: {
            addRate(){
                this.$emit("addRate");
            },
            removeRate(){
                this.$emit("removeRate");
            }
        }
    }
</script>

<style scoped>
    #bet-button  .input-group{
        margin-top: 20px;
        width: 150px;
        height: 50px;
    }
    #bet-button  .div2 div{
        float: left;
    }
    #bet-button .div2 .middle p{
        position: relative;
        left: 40px;
        top: 32px;
    }
    #bet-button .div2 .right button{
        position: relative;
        right: 10px;
        top: 20px;
    }
    #bet-button .div2 .right span{
        position: relative;
        left: -460px;
        top: 20px;
    }

    #bet-button .div2 div:nth-of-type(3){
        float: right;
    }
    #bet-button .div2 .input-group span{
        background-color: white;
    }
    #bet-button .div2 .input-group span:hover{
        cursor: pointer;
    }
    #bet-button .div2 .input-group input{
        height: 50px;
    }
    .active{
        position: relative;
        width: 10px;
        height: 10px;
        border: 1px solid red;
        background: url("../../assets/images/container1/container/1.jpg");
    }
</style>
